<template>
	<view :class="[round ? 'round-box':'']">
		<image v-if="imageBlock.image.length == 1" class="one-image" :src="imageBlock.image[0].image" mode="widthFix" @click="navTo(imageBlock.image[0])" />

		<view v-if="imageBlock.image.length == 2">
			<view class="two-default" v-if="imageBlock.style == 0">
				<view class="two-default-left" @click="navTo(imageBlock.image[0])">
					<image class="image-style" :src="imageBlock.image[0].image" mode="aspectFill"></image>
				</view>
				<view class="two-default-right" @click="navTo(imageBlock.image[1])">
					<image class="image-style" :src="imageBlock.image[1].image" mode="aspectFill"></image>
				</view>
			</view>
			<view class="two-style-1" v-if="imageBlock.style == 1">
				<view class="two-style-1-left" @click="navTo(imageBlock.image[0])">
					<image class="image-style" :src="imageBlock.image[0].image" mode="aspectFill"></image>
				</view>
				<view class="two-style-1-right" @click="navTo(imageBlock.image[1])">
					<image class="image-style" :src="imageBlock.image[1].image" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view v-if="imageBlock.image.length == 3">
			<view class="third-default" v-if="imageBlock.style == 0">
				<view class="third-default-left" @click="navTo(imageBlock.image[0])">
					<image class="image-style" :src="imageBlock.image[0].image" mode="aspectFill"></image>
				</view>
				<view class="third-default-right">
					<view class="third-default-right-box" @click="navTo(imageBlock.image[1])">
						<image class="image-style" :src="imageBlock.image[1].image" mode="aspectFill"></image>
					</view>
					<view class="block-line"></view>
					<view class="third-default-right-box" @click="navTo(imageBlock.image[2])">
						<image class="image-style" :src="imageBlock.image[2].image" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="third-3" v-if="imageBlock.style == 1">
				<view class="third-3-item" v-for="(item,index) in imageBlock.image" :key="index" v-if="index < 3" @click="navTo(item)">
					<image class="image-style" :src="item.image" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view v-if="imageBlock.image.length == 4">
			<view class="four-default" v-if="imageBlock.style == 0">
				<view class="four-default-left" @click="navTo(imageBlock.image[0])">
					<image class="image-style" :src="imageBlock.image[0].image" mode="aspectFill"></image>
				</view>
				<view class="four-default-right">
					<view class="four-default-right-box" @click="navTo(imageBlock.image[1])">
						<image class="image-style" :src="imageBlock.image[1].image" mode="aspectFill"></image>
					</view>
					<view class="block-line"></view>
					<view class="four-default-right-box-two">
						<view class="four-default-right-box-two-item" @click="navTo(imageBlock.image[2])">
							<image class="image-style" :src="imageBlock.image[2].image" mode="aspectFill"></image>
						</view>
						<view class="four-default-right-box-two-item" @click="navTo(imageBlock.image[3])">
							<image class="image-style" :src="imageBlock.image[3].image" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="four-style-1" v-if="imageBlock.style == 1">
				<view class="four-style-1-item" v-for="(item,index) in imageBlock.image" :key="index" v-if="index < 4" @click="navTo(item)">
					<image class="image-style" :src="item.image" mode="aspectFill"></image>
				</view>
			</view>
			<view class="four-style-2" v-if="imageBlock.style == 2">
				<view class="four-style-2-item margin-bottom-xs" @click="navTo(imageBlock.image[0])">
					<image class="image-style" :src="imageBlock.image[0].image" mode="aspectFill"></image>
				</view>
				<view class="four-style-2-item margin-bottom-xs" @click="navTo(imageBlock.image[1])">
					<image class="image-style" :src="imageBlock.image[1].image" mode="aspectFill"></image>
				</view>
				<view class="four-style-2-item" @click="navTo(imageBlock.image[2])">
					<image class="image-style" :src="imageBlock.image[2].image" mode="aspectFill"></image>
				</view>
				<view class="four-style-2-item" @click="navTo(imageBlock.image[3])">
					<image class="image-style" :src="imageBlock.image[3].image" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "npGridImage",
		props: {
			imageBlock: {
				type: Object,
				default: function() {
					return {};
				}
			},
			round: {
				type: Boolean,
				default: false
			},
		},
		methods: {
			navTo(item) {
				this.$config.navTo(item);
			},
		}
	}
</script>

<style>
	.round-box {
		background: #FFFFFF;
		overflow: hidden;
		margin: 10rpx;
		border-radius: 20rpx;
	}

	.one-image {
		width: 100%;
	}

	.image-style {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	/**默认样式左图300x340右图410x340*/
	.two-default {
		width: 730rpx;
		padding: 10rpx;
		height: 360rpx;
		display: flex;
		flex-direction: row;
	}

	.two-default-left {
		width: 300rpx;
		height: 340rpx;
		margin-right: 10rpx;
	}

	.two-default-right {
		width: 410rpx;
		height: 340rpx;
	}

	/**2张图 352x140*/
	.two-style-1 {
		width: 730rpx;
		padding: 10rpx;
		height: 160rpx;
		display: flex;
		flex-direction: row;
	}

	.two-style-1-left {
		width: 360rpx;
		height: 140rpx;
		margin-right: 10rpx;
	}

	.two-style-1-right {
		width: 360rpx;
		height: 140rpx;
	}

	/*图片宽度300*340 右图410*165*/
	.third-default,
	.four-default{
		width: 730rpx;
		padding: 10rpx;
		height: 360rpx;
		display: flex;
		flex-direction: row;
	}

	.third-default-left,
	.four-default-left {
		width: 300rpx;
		height: 340rpx;
		margin-right: 10rpx;
	}

	.third-default-right,
	.four-default-right {
		width: 410rpx;
		height: 360rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.third-default-right-box,
	.four-default-right-box{
		height: 165rpx;
	}

	.four-default-right-box-two {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 165rpx;
	}

	.four-default-right-box-two-item {
		width: 200rpx;
		height: 165rpx;
		margin-right: 10rpx;
	}

	.four-default-right-box-two-item:last-child {
		margin-right: 0;
	}
	.four-style-2 {
		width: 730rpx;
		padding: 10rpx;
		height: 360rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.four-style-2-item {
		width: 350rpx;
		height: 165rpx;
	}

	/*图片宽度230*220*/
	.third-3 {
		width: 730rpx;
		height: 160rpx;
		padding: 10rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.third-3-item {
		width: 230rpx;
		height: 140rpx;
		margin-right: 10rpx;
	}

	.third-3-item:last-child {
		margin-right: 0;
	}

	/**图片170x170*/
	.four-style-1 {
		width: 730rpx;
		padding: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 190rpx;
	}

	.four-style-1-item {
		width: 170rpx;
		height: 170rpx;
		margin-right: 10rpx;
	}

	.four-style-1-item:last-child {
		margin-right: 0;
	}


	.block-line {
		height: 10rpx;
	}
</style>
